<template>
	<view>
		<view class="swiper" v-animate-on-scroll>
		  <u-swiper :list="list" :height="500"></u-swiper>
		</view>
		<view class="content">
			<view class="title">{{datalist.name}}</view>
			<view class="price">
				<view class="left">
					<image src="/static/home/js.png" mode="widthFix"></image>
					<view>{{datalist.credit | priceFormat}}</view>
				</view>
				<view class="right">
					￥{{datalist.price | priceFormat}}
				</view>
			</view>
			<view class="tags">
				<view class="tags_itme">
					
				</view>
			</view>
		</view>
	    <view class="u-content">
		   <u-parse :html="datalist.description"></u-parse>
	    </view>
		<view class="bottom">
			<view class="add_cutton">
				<view class="price">
					<text>{{(datalist.credit * quantity) || 0}}</text>
					<text>积分</text>
				</view>
				<view class="coutton">
					<view style="color: #7D7D7D;margin-right: 20rpx;font-size: 24rpx;">数量</view>
					<view class="counter-container">
					  <view class="btn-minus" @click="decrease">
					    <image src="/static/jf.png" mode="widthFix"></image>
					  </view>
					  <view class="quantity">
					    <input type="number" v-model="quantity">
					  </view>
					  <view class="btn-plus" @click="increase">
					    <image src="/static/jf1.png" mode="widthFix"></image>
					  </view>
					</view>
				</view>
			</view>
			<view class="btn" @click="Redeem">立即兑换</view>
		</view>
		<u-popup v-model="show" mode="center" :border-radius="20">
			<view class="po_center">
				<view class="title">确定要兑换此商品吗？</view>
				<view class="tis">您将消耗<text>{{datalist.credit * quantity | priceFormat}}</text>分</view>
				<view class="cfimg">
					<view class="btn1" @click="()=> show = false">取消</view>
					<view class="btn2" @click="confirm">确认</view>
				</view>
			</view>
		</u-popup>
		<Butogin :zheshow="zheshow" @colse="(e)=> zheshow = false"/>
	</view>
</template>

<script>
	import { creditProductdata ,  creditOrder } from '@/core/api/index.js'
	import { mapState } from 'vuex';
	export default{
		data(){
			return{
				list:[],
				datalist:{},
				quantity: 1,
				show:false,
				zheshow:false,
				id:''
			}
		},
		onLoad(r) {
			console.log(r)
			this.CreditProductdata(r.id)
			this.id = r.id
		},
		computed: {
		  ...mapState({
		    userInfo: state => state.user.userInfo
		  })
		},
		methods:{
			decrease() {
			  if (this.quantity > 1) {
			    this.quantity--;
			  }
			},
			Redeem(){
				if(!this.userInfo.phone){
					this.zheshow = true
				}else{
					this.show  = true
				}
			},
			increase() {
			  this.quantity++;
			},
			async CreditProductdata(id){
			    const {data} = await creditProductdata(id)	
				console.log(data)
				if (data.pics && data.pics && Array.isArray(data.pics)) {
				   data.pics = data.pics.map(url => {
				     // 确保每个URL都以https开头
				     if (url && !url.startsWith('http')) {
				       return 'https:' + url
				     }
				     return url
				   })
				 }
				 this.list = data.pics
				this.datalist = data
			},
			async confirm(){
				let parems = {
					creditProductId:this.datalist.id,
					count:this.quantity
				}
				const res = await creditOrder(parems)
				console.log(res)
				if(res.code != '00000'){
					uni.showToast({
						title:res.message,
						icon:'none'
					})
					this.show = false
				}else{
					this.$store.dispatch('user/getUserinfo')
					uni.navigateTo({
						url:'/pages/points/successful?id=' + res.data
					})
					this.show = false
				}
				console.log(res)
			}
		}
	}
</script>

<style>
	page{
		background: #F8F8F8;
	}
</style>
<style lang="scss">
	.content{
		background-color: #fff;
		padding: 20rpx 20rpx;
		.title{
			font-size: 30rpx;
		}
		.price{
			display: flex;
			align-items: baseline;
			margin-top: 5rpx;
			image{
				width: 25rpx;
				margin-right: 4rpx;
			}
			.left{
				display: flex;
				// align-items: center;
				color: #AF1C1B;
				font-size: 42rpx;
				    align-items: baseline;
				font-weight: 600;
			}
			.right{
				font-size: 24rpx;
				font-weight: 600;
				color: #565656;
				margin-left: 14rpx;
			}
		}
	}
	.u-content{
		background-color: #fff;
		padding: 20rpx 20rpx 270rpx;
		margin: 30rpx auto;
	}
	.bottom{
		position: fixed;
		bottom: 0%;
		width: 100%;
		background-color: #fff;
		padding: 30rpx 30rpx 50rpx 20rpx;
		.add_cutton{
			display: flex;
			justify-content: space-between;
			.price{
				font-weight: 600;
				font-size: 42rpx;
				text:nth-child(2){
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
			.coutton{
				display: flex;
				align-items: center;
				.counter-container {
				  display: flex;
				  height: 58rpx;
				  align-items: center;
				  // background: #F5F5F5;
				  border: 1rpx solid #666666;
				  border-radius: 8rpx 8rpx 8rpx 8rpx;
				  .btn-minus, .btn-plus {
				    width: 70rpx;
				    height: 100%;
				    position: relative;
				    display: flex;
				    align-items: center;
				    justify-content: center;
				    image {
				      width: 20rpx;
				      height: auto;
				    }
				  }
				  .quantity {
				    width: 50rpx;
				    text-align: center;
				  }
				  .btn-minus::after {
				    content: '';
				    right: 5%;
				    position: absolute;
				    top: 50%;
				    transform: translate(-50%, -50%);
				    width: 0.5rpx;
				    height: 30rpx;
				    background-color: #747373;
				  }
				  .btn-plus::after {
				    content: '';
				    left: 5%;
				    position: absolute;
				    top: 50%;
				    transform: translate(-50%, -50%);
				    width: 0.1rpx;
				    height: 30rpx;
				    background-color: #747373;
				  }
				}
			}
		}
		.btn{
			width: 100%;
			height: 70rpx;
			background-color: #EC691B;
			margin-top: 47rpx;
			color: #fff;
			line-height: 70rpx;
			text-align: center;
		}
	}
	.po_center{
		width: 90vw;
		background-color: #fff;
		margin: 0 auto;
		padding: 80rpx 0 0;
		.title{
			font-size: 34rpx;
			text-align: center;
			font-weight: 600;
		}
		.tis{
			color: #5F636B;
			text-align: center;
			margin: 20rpx 0;
			text{
				color: #F26B2E;
			}
		}
		.cfimg{
			display: flex;
			margin-top: 80rpx;
			width: 100%;
			border-top: 1rpx solid #F6F6F6;
			.btn1 , .btn2{
				width: 50%;
				text-align: center;
				height: 120rpx;
				line-height: 120rpx;
				font-size: 30rpx;
			}
			.btn1{
				border-right: 1rpx solid #F6F6F6;
				color: #A3A3A3;
			}
			.btn2{
				color: #EC691B;
			}
		}
	}
</style>